import {
    Tabs,
    Image,
    InfiniteScroll, // 上拉加载
    PullToRefresh // 下拉刷新
} from 'antd-mobile'
import React, { useState, useEffect } from 'react'
import { apiGetList } from '../../api'
import { connect } from 'react-redux'
import { RootStore } from '../../store'
import { Dispatch } from 'redux'
import { useNavigate } from 'react-router-dom'
import './style.css'
import { 
    sleep  // 延时器
} from 'antd-mobile/es/utils/sleep'

interface propsType {
    list?: {
        img: string[],
        id: string,
        title: string,
        price: number,
        type: number
    }[],
    dispatch?: Dispatch
}

const Classify = (props: propsType) => {
    const [keys, setKeys] = useState('0')

    const [page, setPage] = useState(1)

    // 请求开关
    const [isLoading, setIsLoading] = useState(true)

    // 判断是否未还有数据可以加载
    const [hasMore, setHasMore] = useState(true)

    const navgiate = useNavigate()

    const { dispatch, list } = props
    const tabs = [
        "布艺软转",
        "被枕",
        "床品套件",
        "灯具",
        "脚垫",
    ]

    useEffect(() => {
        getList()
    }, [keys])

    // 获取页面的数据
    const getList = () => {
        apiGetList({ key: keys, page: page }).then((res: any) => {
            // 分类的数据
            dispatch && dispatch({ type: 'CHANGE_LIST', data: res.data })

            if (res.total === res.data.length) {
                setHasMore(false)
            }

            // 本次请求完成， 下一次触发可以正常请求
            setIsLoading(true)
        })
    }



    // 获取tabs点击的下标
    const getTabKey = (key: string) => {
        setKeys(key)
    }

    // 跳转详情
    const toDetail = (id: string) => {
        navgiate(`/detail/${id}`)
    }

    const loadMore = async () => {

        if (isLoading) {

            // 关闭请求开关 方式重复触发
            setIsLoading(false)

            await setPage(page + 1)

            //  获取列表数据
            await getList()
        }
    }

    const onRefresh = async() => {
        await sleep(3000)

        //  刷新页面
        window.location.reload()
    }

    return <div className="public classify-box">
        <Tabs defaultActiveKey={keys} onChange={(key) => getTabKey(key)}>
            {
                tabs.map((item, idx) => {
                    return <Tabs.Tab title={item} key={idx}></Tabs.Tab>
                })
            }
        </Tabs>
        <div className="classify-body">
            <PullToRefresh
                onRefresh={() => onRefresh()}
            >
                {
                    list && list.length && list.map((item, idx) => {
                        return <div key={idx} className="list-item" onClick={() => toDetail(item.id)}>
                            {/* 图片懒加载 */}
                            <Image lazy src={item.img[0]} alt="" />
                            <p>{item.title}</p>
                            <span>￥{item.price}</span>
                        </div>
                    })
                }
                {/* 图个list中有数据  就会渲染无线列表  防止页面初始化触发加载更多 */}
                {
                    list && list.length && <InfiniteScroll
                        loadMore={() => loadMore()} // 触发加载更多
                        hasMore={hasMore} // 是否还有更多内容
                    />
                }
            </PullToRefresh>


        </div>


    </div>
}

const mapStateToProps = (state: RootStore) => {
    return state
}

export default connect(mapStateToProps)(Classify)